<template>
	<view class="container">
	  <view class="top_box flex_box">
	    <view class="flex1">
	      <view class="tell">投诉电话：{{info.complaintPhone || '暂无'}}</view>
	      <view class="text">{{info.orderTips}}</view>
	    </view>
	    <view class="ewm_box" v-if="info.groupAddr">
	      <image :src="info.groupAddr" class="ewm"></image>
	      <view class="ewm_title">家庭教育群</view>
	    </view>
	  </view>
	  <view class="list_wrap">
	    <view class="list_item flex_box" v-for='item in list' :key='item.id'>
	      <image :src="item.isChecked?check1:check2" class="check_icon" @tap="checkChange(item)"></image>
	      <image :src="item.teacherInfo.headPic" class="avatar"></image>
	      <view class="flex1">
	        <view class="title">{{item.teacherInfo.teacherName}}</view>
	        <view class="tags flex_box_wrap">
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle1">{{item.teacherInfo.teachStyle1}}</view>
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle2">{{item.teacherInfo.teachStyle2}}</view>
	          <view class="tag tag_organge" v-if="item.teacherInfo.teachStyle3">{{item.teacherInfo.teachStyle3}}</view>
	        </view>
	        <view class="flex_between">
	          <view class="price">¥{{item.teacherInfo.classPrice}}/时</view>
	          <view class="remaining">剩余{{item.lastClassCount || 0}}课时</view>
	        </view>
	      </view>
	    </view>
	  </view>
		<view class="no_message" v-if="list.length==0">
			<image src="../../static/images/empty2.png" class="empty"></image>
			<view class="empty_text">暂无履约记录</view>
		</view>
	  <view class="control_box flex_box" v-if="list.length>0">
	    <view class="flex1 flex_box">
				<image :src="isCheckAll?check1:check2" class="check_icon" @tap="checkAllChange()"></image>
	      <view>全选</view>
	     <!-- <view class="heji">合计：</view>
	      <view class="total">￥{{total}}</view> -->
	    </view>
	    <view class="btn org_btn" @tap="delTeacher">解聘</view>
	    <view class="btn green_btn" @tap="goOrder">续约</view>
	  </view>
	</view>
</template>

<script>
	import {getDayStatus,toast} from '@/common/js/public.js'
	export default {
		data() {
			return {
				list:[],// 数据
				check1:require('@/static/images/check.png'), // 选中icon
				check2:require('@/static/images/nocheck.png'), // 未选中icon
				isCheckAll:false, //  是否全部选中
				customerInfo:'',
				info:'',
			}
		},
		onShow() {
			uni.removeStorageSync('pay_param')
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			let isGoNavigate = uni.getStorageSync('isGoNavigate')
			if (!this.customerInfo&&!isGoNavigate) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			} else if(!this.customerInfo&&isGoNavigate){
				uni.removeStorageSync('isGoNavigate')
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
			if (this.customerInfo) {
				this.queryList()
				this.queryCustomerInfoByOpenId()
			}
		},
		computed:{
			total() {
				let total = 0
				this.list.forEach(ele=>{
					if (ele.isChecked) {
						total += ele.teacherInfo.classPrice * ele.teachCount
					}
				})
				return total
			}
		},
		methods: {
			// 查询
			queryList() {
				let param = {
					customerCode:this.customerInfo.customerCode
				}
				this.$api.queryList(param).then(res=>{
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			queryCustomerInfoByOpenId() {
				let param = {
					customerAppId:this.customerInfo.customerAppId,
					customerOpenId:this.customerInfo.customerOpenId,
					customerUnionId:this.customerInfo.customerUnionId
				}
				this.$api.queryCustomerInfoByOpenId(param).then(res=>{
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			getDayStatus(item,type) {
				return getDayStatus(item,type)
			},
			// 去确认订单
			goOrder() {
				let list = []
				this.list.forEach(ele=>{
					if (ele.isChecked) {
						list.push(ele)
					}
				})
				if (list.length == 0) {
					toast('请先选择要续约的课程')
					return
				}
				uni.setStorageSync('renewal_list',list)
				uni.navigateTo({
					url: '/pages/renewal/renewal',
				})
			},
			// 解聘
			delTeacher() {
				let arr = []
				this.list.forEach(ele=>{
					if (ele.isChecked) {
						arr.push(ele.id)
					}
				})
				let param = {
					idList:arr
				}
				this.$api.deleteCustomerTeacherInfo(arr).then(res=>{
					if (res.code == 1) {
						this.queryList()
					}
				})
			},
			getTeachCount(info) {
				if (info.teachCount) {
					return info.teachCount
				} else {
					this.$set(info,'teachCount',info.teacherInfo.minClassCount)
				}
			},
			// 单个单选框的选中
			checkChange(item) {
				if (item.isChecked) {
					item.isChecked = false
					this.isCheckAll = false
				} else {
					this.$set(item,'isChecked',true)
					let idx = 0
					this.list.forEach(ele=>{
						if (ele.isChecked) {
							idx++
						}
					})
					if (idx == this.list.length) {
						this.isCheckAll = true
					}
				}
			},
			// 全选全不选
			checkAllChange() {
				this.isCheckAll = !this.isCheckAll
				this.list.forEach(ele=>{
					this.$set(ele,'isChecked',this.isCheckAll)
				})
			},
			// 数量的增加减少
			numChange(type,item) {
				if (type==1) {
					if (item.teachCount == item.teacherInfo.minClassCount) return
					item.teachCount--
				} else {
					// if (item.teachCount>=item.total) return
					item.teachCount++
				}
			}
		}
	}
</script>

<style scoped lang="stylus">
	@import '../../common/common.css';
	.container{
		min-height: 100vh;
	}
	.top_box{
	  margin-bottom:20rpx;
	  padding:20rpx 30rpx;
	  background-color: #fff;
	}
	.control_box{
	  position: fixed;
	  left: 0;
	  bottom:0;
	  width: 100%;
	  padding:30rpx;
	  box-sizing: border-box;
	  background-color: #fafafa;
	}
	.total{
		margin-right: 20rpx;
	}
	.org_btn{
		width: 190rpx;
	  /* flex: 1;
		min-width: 0; */
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #FAB467;
	  border-radius: 70rpx 0 0 70rpx;
	}
	.green_btn{
	  width: 190rpx;
		/* flex: 1;
		min-width: 0; */
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #34BE97;
	  border-radius:0 70rpx 70rpx 0;
	}
	.no_message{
		height: calc(100vh - 330rpx);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.empty{
		width: 324rpx;
		height: 260rpx;
	}
	.empty_text{
		font-size: 28rpx;
		color:#999;
		line-height: 80rpx;
	}
	.remaining{
		color:#666;
		font-size 26rpx
	}
	.bg
		width 100%
		height 628rpx
	.btn_box
		width 100%
		box-sizing border-box
		padding 0 30rpx
		margin-top 170rpx
		.login_btn
			width 100%
			height 88rpx
			line-height 88rpx
			background-color #34BE97
			color #fff
</style>
